import React from 'react';
import { Flex, VStack, useMediaQuery } from '@chakra-ui/react';
import ResultsWinner from '../ui/ResultsWinner'

export default function ResultPage(): JSX.Element {
  const [isLargerThanPhone] = useMediaQuery('(min-width: 800px)');

  const mainContainerStyle: React.CSSProperties = {
    backgroundImage: isLargerThanPhone
      ? 'url(/img/3.png)'
      : 'url(/img/3.png)',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    height: '100vh',
  };

  return (
    <Flex
      style={mainContainerStyle}
      align="center"
      justify="center"
      height="100vh"
    >
                  <audio autoPlay loop = {false}>
            <track kind="captions" />

              <source src="/audio/1.mp3" type="audio/mp3" />
              Your browser does not support the audio element.
            </audio>
      <VStack flex={3}>
        <ResultsWinner />
      </VStack>
    </Flex>
  );
}
